<template>
  <!--供应商设备新增弹层 start -->
  <el-dialog
    v-dialogDrag
    :title="dialogTitle"
    :close-on-click-modal="false"
    :visible.sync="dialogVisible"
    class="dialogStyleMiddle"
    :before-close="cancel"
  >
    <el-form
      v-if="dialogVisible"
      ref="addForm"
      class="dialog-form"
      :model="formData"
      :rules="rules"
      label-width="80px"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="设备名称" prop="name">
            <el-input v-model="formData.name" placeholder="请输入设备名称" size="medium" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所在区域" prop="province">
            <el-cascader v-model="formData.currentProvince" size="medium" placeholder="请选择所在区域" :props="cityNormalizer" :options="cityOptions" clearable style="width: 100%" @change="changeCitySelect">
              <template slot-scope="{ data }">
                <span>{{ data.label }}</span>
              </template>
            </el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="设备编号" prop="equipmentNum">
            <el-input v-model="formData.equipmentNum" readonly placeholder="请输入设备编号" size="medium" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="设备类型" prop="equipmenType">
            <treeselect
              v-model="formData.equipmenType"
              size="medium"
              :flat="true"
              :show-count="true"
              :normalizer="normalizer"
              :options="equipOption"
              placeholder="请选择设备类型"
              no-options-text="暂无数据"
              :clearable="false"
              clear-value-text=""
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="设备型号" prop="equipmentModel">
            <el-input v-model="formData.equipmentModel" placeholder="请输入设备型号" size="medium" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="" prop="licensePlate">
            <label slot="label" v-html="`车&ensp;牌&ensp;号`" />
            <el-input v-model="formData.licensePlate" placeholder="请输入车牌号" size="medium" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="信用代码" prop="orgCreditCode">
            <el-input v-model="formData.orgCreditCode" placeholder="请输入产权单位统一信用代码" size="medium" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="生产厂家" prop="manufacturer">
            <el-input v-model="formData.manufacturer" placeholder="请输入生产厂家" size="medium" />
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <DialogFooter />
    </div>
  </el-dialog>
  <!--供应商设备新增弹层end -->
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { editEquipment } from '@/api/system/owningEquipment'
import { addPersonEquipment, detailEquipment, getEquipmentCode } from '@/api/system/equipment'
import DialogFooter from '@/components/Common/Btns/DialogFooter/index'
import { listRegionTree } from '@/api/common/area.js'
export default {
  name: 'AddDialog',
  components: {
    DialogFooter,
    Treeselect
  },
  props: {
    equipOption: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      normalizer(node) {
      // 去掉children=null的属性
        if (node.children == null) {
          delete node.children
          return {
            id: node.typeNum,
            label: node.typeName
          }
        } else {
          return {
            id: node.typeNum,
            isDisabled: node.typeName === '钻探',
            label: node.typeName,
            children: node.children
          }
        }
      },
      /* 手动添加 start */
      // 筛选条件
      filters: {
        name: '',
        licensePlate: ''
      },
      // 筛选列表
      tableData: [],
      /* 手动添加 end */
      /* 新增 start*/
      dialogTitle: '', // 弹层标题
      dialogVisible: false, // 弹层是否显示
      btnDisabled: false, // 确定按钮
      formData: {
        name: '', // 设备名称
        equipmentNum: '', // 设备编号
        equipmenType: undefined, // 设备类型
        equipmentModel: '', // 设备型号
        licensePlate: '', // 车牌号
        orgCreditCode: '', // 信用代码
        manufacturer: '', // 生产厂家
        userFlag: '1',
        currentProvince: '',
        province: '', // 省
        city: '', // 市
        county: '' // 县
      },
      // 选择的城市
      currentProvince: '',
      cityOptions: [], // 城市数据
      cityNormalizer: {
        value: 'value',
        label: 'label',
        children: 'children'
      },
      // 表单验证规则
      rules: {
        name: [
          { required: true, message: '设备名称不能为空', pattern: '[^\x22]+', trigger: 'blur' }
        ],
        equipmentNum: [
          { required: true, message: '设备编号不能为空', trigger: 'blur' }
        ],
        licensePlate: [
          { required: true, message: '车牌号不能为空', trigger: 'blur' }
        ],
        equipmentModel: [
          { required: true, message: '设备型号不能为空', trigger: 'blur' }
        ],
        equipmenType: [
          { required: true, message: '设备类型不能为空', trigger: 'blur' }
        ],
        province: [
          { required: true, message: '所在区域不得为空', trigger: 'change' }
        ]
      }
      /* 新增 end*/
    }
  },
  mounted() {
    this.getRegionTree()
  },
  methods: {
    // 获取区域树
    async getRegionTree() {
      const { data } = await listRegionTree({ regionCode: '' })
      if (data) {
        this.cityOptions = data
      }
    },
    // 所属区域
    changeCitySelect(regionCode) {
      const [province, city, county] = regionCode
      this.formData.province = province // 省
      this.formData.city = city// 市
      this.formData.county = county // 区/县
      getEquipmentCode({ regionCode: county }).then(res => {
        this.formData.equipmentNum = res.data
      })
    },
    /* 新增/编辑弹层 start*/
    handleAdd(title, id) {
      this.dialogTitle = title
      this.dialogVisible = true
      this.emptyAddForm() // 清空勘察单位
      if (id) {
        this.getDetailById(id)
      }
    },
    // 获取详情
    async getDetailById(id) {
      const { data } = await detailEquipment(id)
      this.formData = { ...data, userFlag: '1' }
      const { province, city, county } = data
      this.formData.currentProvince = [province, city, county]
    },
    // 取消按钮
    cancel() {
      this.dialogVisible = false
      this.btnDisabled = false
      this.emptyAddForm()
    },
    // 提交按钮
    submitForm() {
      this.$refs['addForm'].validate(async valid => {
        if (valid) {
          this.btnDisabled = true
          if (this.formData.id) {
            await editEquipment(this.formData)
            this.msgSuccess('修改成功')
          } else {
            await addPersonEquipment(this.formData)
            this.msgSuccess('保存成功')
          }
          this.$parent.getList()
          this.cancel()
        }
      })
    },
    // 表单重置
    emptyAddForm() {
      this.formData.currentProvince = ''
      this.resetForm('addForm')
      this.formData.id = ''
    }
    /* 新增弹层 end*/
  }
}
</script>

